<template>
<<<<<<< HEAD
  <div class=".header">   
    <SdyHeader title='啥都有' back>
        <template #title>
          <van-search class='index-search'
            v-model='searchText'
           shape='round' background='#c72418' placeholder="请输入搜索关键词" />
        </template>
        <template #right>
          <van-button type='success' size='small' >搜索</van-button>
        </template>
    </SdyHeader>

    <!-- 搜索历史 -->
  <SdySearchHistory v-if='!searchText'></SdySearchHistory>
  <!-- 搜索列表 -->
  <SdySearchList v-else></SdySearchList>
  </div>

</template>
<script setup lang='ts'>
 import SdyHeader from '@/views/SdyHeader/index.vue' 
 import SdySearchHistory from '@/views/SdySearch/components/SdySearchHistory.vue'
 import SdySearchList from '@/views/SdySearch/components/SdySearchList.vue'
import {ref} from 'vue'

 //准备一个数据和文本框互动
 const searchText = ref<string>('')
</script>

<style scoped lang="scss"> 

</style>
=======
  <div class="sdy-search">
    <SdyHeader title="啥都有" back>
      <template #title>
        <van-search v-model="searchText" shape="round" background="#c72418" placeholder="请输入搜索关键词" />
      </template>
      <template #right>
        <van-button @click="serachHandler" size="small" type="success">搜索</van-button>
      </template>
    </SdyHeader>

    <!-- 搜索相关的内容显示 -->
    <!-- 如果 searchText 没有文本的时候显示 -->
    <!-- <SdySearchHistory v-if="!searchText"></SdySearchHistory> -->
    <!-- 如果 searchText 有文本的时候显示 -->
    <!-- <SdySearchList v-else></SdySearchList> -->

    <!-- 当 searchText 为 true 的时候渲染 SdySearchList 组件 -->
    <!-- 当 searchText 为 false 的时候渲染 SdySearchHistory 组件 -->
    <component :is="searchText ? SdySearchList : SdySearchHistory"></component>
  </div>
</template>

<script setup lang="ts">
import SdySearchHistory from './components/SdySearchHistory.vue'
import SdySearchList from './components/SdySearchList.vue'
import { ref, watch, provide } from 'vue'
import { useRouter, type Router } from 'vue-router'

// 导入相关 api 请求接口
import { searchListApi } from '@/api/goods'

// 导入相关 ts 接口
import type { MyHotItem } from '@/config/interface'

const $router: Router = useRouter()

// 准备一个数据, 和 文本框 交互
const searchText = ref<string>('')

// 准备一个点击搜索按钮的方法
const serachHandler = () => {
  const text = searchText.value.trim()
  // 非空验证
  if (!text) return

  // 跳转路由
  $router.push({ path: '/list', query: { search: text } })

}

// 随着搜索的关键字变化实时请求最新的相关数据展示
// 准备一个数据, 表示搜索列表
const searchList = ref<MyHotItem[]>([])

// 利用 watch 监控 searchText
watch(searchText, async () => {
  if (!searchText.value.trim()) return

  const res = await searchListApi(searchText.value.trim())
  console.log(res)
  searchList.value = res.data
})

provide('searchList', searchList)
</script>

<style scoped lang="scss"></style>
>>>>>>> 24d0d7191411ba3bacecf3c116acfb924e67c6fb
